	<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>储值明细</title>
    <style>
        body{ width: 100%; margin: 0; padding: 0; font-family: '微软雅黑';}
		body p{ color:#949494; font-size:14px; padding-left:10px;}
        input::-ms-input-placeholder{text-align: center;}
		.header{ text-align: center; background-color:#F7F6F4; color:#4D4C4A;border-bottom: 1px solid #4D4C4A; width: 100%; height: 40px; line-height: 40px;}
		.h-mid { width:100%; height:40px; float:left; text-align:center; color:#333; font-size:16px; line-height:45px; position:relative;}
		.h-mid span { color:#4D4C4A; font-size:12px;}
		.body{width:100%}
		.title{ padding:10px}
		.infolist{padding-top:20px;padding-left:10px;width:94%;}
		.info{margin-bottom:30px;padding-right:10px;padding-bottom:10px;padding-top:25px;position:relative;padding-left:10px;border:1px solid #949494; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;}
		.date{position:absolute;top:-13px;text-align:center;width:35%;height:25px;line-height:25px;border:1px solid #F9BC69; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;background-color:#F9BC69;color:#534C44;font-size:14px;}
		.store{float:left;font-size:13px;}
		.value{float:right;font-size:30px;font-weight:bold;}
		.plus{color:#F6BA71}
		.minus{color:#3FBA8C}
		.clearfix:after {content: " ";display: block;clear: both;height: 0;}
		.clearfix {zoom: 1;}
    </style>
</head>
<body>
	<div class="header">
      	<div class="h-mid">
        	<span>储值明细</span>
      	</div>
    </div>
    <div class="body">
    	<div class="title"><span>储值明细信息（3笔）</span></div>
        <div class="infolist">
        	<div class="info clearfix">
            	<div class="date">2016-08-06</div>
                <div class="store">储值门店：<span>cathytest</span>
                <div>储值类型：<span>储值</span></div></div>
                <div class="value plus">+200.00</div>
            </div>
            <div class="info clearfix">
            	<div class="date">2016-08-05</div>
                <div class="store">储值门店：<span>cathytest</span>
                <div>储值类型：<span>刷卡消费</span></div></div>
                <div class="value minus">-18.50</div>
            </div>
            <div class="info clearfix">
            	<div class="date">2016-08-04</div>
                <div class="store">储值门店：<span>cathytest</span>
                <div>储值类型：<span>储值</span></div></div>
                <div class="value plus">+36.50</div>
            </div>
        </div>
    </div>
</body>
</html>